<template>
	<view class="table">
		<view class="th">
			<view class="td u-line-1" v-for="(item,index) in thead" :key="index">
				{{item.name}}
			</view>
		</view>

		<view class="tr" v-for="(item,trIndex) in tbody" :key="trIndex" :class="item.fileUrl?'trHeight':'tr'">
			<view class="td" :class="operation.length === 0 && 'u-line-1'" v-for="(th,tdIndex) in thead" :key="tdIndex">
				<template v-if="th.prop === 'operation'">
					<text class="operation" v-for="(operationItem,operationIndex) in operation" :key="operationIndex"
						@tap="operationClick(item,operationIndex,trIndex)">{{operationItem}}</text>
				</template>
				<template v-else-if="th.prop === 'img'">
					<image :src="item[th.prop]" mode="" @click="fileClick(item[th.prop])" style="width: 100rpx;height:100rpx">
					</image>
				</template>
				<template v-else>
					{{item[th.prop]}}
				</template>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			operation: {
				type: Array,
				default: () => {
					return ['删除']
				}
			},
			thead: {
				type: Array,
				default: () => {
					return []
				}
			},

			tbody: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				imgUrl: this.$imgUrl,
			}
		},
		mounted() {
			console.log('列表', this.tbody)
		},
		methods: {
			operationClick(row, index, rowIndex) {
				this.$emit('operationClick', row, index, rowIndex);
			},

			fileClick(index) {
				console.log('index', index)
				this.$emit('fileClick', index);
			},

		}
	}
</script>
<style lang="scss" scoped>
	.table {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.th {
			width: 100%;
			height: 62rpx;
			background: rgba(90, 109, 254, 0.1);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.td {
				flex: 1;
				font-weight: 400;
				font-size: 18rpx;
				color: #333333;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.tr {
			width: 100%;
			// height: 62rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 8rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #DDDDDD;

			.td {
				flex: 1;
				font-weight: 400;
				font-size: 18rpx;
				color: #333333;
				text-align: center;
				font-style: normal;
				text-transform: none;

				.operation {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #5568FE;
					font-style: normal;
					text-transform: none;
					margin-left: 20rpx;
				}
			}
		}

		.trHeight {
			width: 100%;
			height: 120rpx !important;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #DDDDDD;

			.td {
				flex: 1;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				text-align: center;
				font-style: normal;
				text-transform: none;

				.operation {
					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #5568FE;
					font-style: normal;
					text-transform: none;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>